<template>
  <header class="app-header">
    <div class="header-container">
      <!-- 搜索框 -->
      <div class="header-search">
        <input 
          type="text" 
          v-model="searchQuery" 
          @input="handleSearch" 
          placeholder="搜索..."
          class="header-search-input">
        <div class="header-search-icon">
          <i class="ri-search-line"></i>
        </div>
      </div>

      <!-- 右侧操作区 -->
      <div class="header-actions">
        <!-- 通知图标 -->
        <div @click="handleNotification" class="header-icon-btn" title="通知">
          <i class="ri-notification-3-line"></i>
        </div>

        <!-- 设置图标 -->
        <div @click="handleSettings" class="header-icon-btn" title="设置">
          <i class="ri-settings-3-line"></i>
        </div>

        <!-- 用户信息 -->
        <div class="header-user" @click="handleUserMenu">
          <img :src="userInfo.avatar" :alt="userInfo.name" class="header-user-avatar">
          <span class="header-user-name">{{ userInfo.name }}</span>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    userInfo: {
      type: Object,
      default: () => ({
        name: '陈思远',
        avatar: 'https://readdy.ai/api/search-image?query=professional%20headshot%20of%20a%20young%20asian%20man%20with%20short%20black%20hair%2C%20business%20casual%20attire%2C%20neutral%20background%2C%20high%20quality%20portrait&width=80&height=80&seq=1&orientation=squarish'
      })
    }
  },
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchQuery)
    },
    handleNotification() {
      this.$emit('notification-click')
    },
    handleSettings() {
      this.$emit('settings-click')
    },
    handleUserMenu() {
      this.$emit('user-menu-click')
    }
  }
}
</script>

<style scoped>
/* ===== 顶部导航栏样式 ===== */

/* Remix Icon 图标修复 */
:where([class^="ri-"])::before {
  content: "\f3c2";
}

/* Header 主容器 */
.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 16rem; /* 256px - 左侧留出侧边栏空间 */
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Header 内容容器 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
}

/* ===== 搜索区域 ===== */

/* 搜索框容器 */
.header-search {
  position: relative;
}

/* 搜索输入框 */
.header-search-input {
  padding-left: 2.5rem; /* pl-10 */
  padding-right: 1rem; /* pr-4 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem;
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 8px; /* rounded-button */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  outline: none;
  transition: all 0.2s ease;
  min-width: 200px;
}

.header-search-input::placeholder {
  color: #9ca3af; /* text-gray-400 */
}

.header-search-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-primary */
}

/* 搜索图标 */
.header-search-icon {
  position: absolute;
  left: 0.75rem; /* left-3 */
  top: 50%;
  transform: translateY(-50%);
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af; /* text-gray-400 */
  pointer-events: none;
}

/* ===== 右侧功能区 ===== */

/* 功能区容器 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem; /* space-x-4 */
}

/* 图标按钮 */
.header-icon-btn {
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px; /* rounded-full */
  background-color: #eff6ff; /* bg-blue-50 */
  color: #3b82f6; /* text-primary */
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-icon-btn:hover {
  background-color: #dbeafe; /* hover:bg-blue-100 */
}

/* 用户信息区域 */
.header-user {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.header-user:hover {
  opacity: 0.8;
}

/* 用户头像 */
.header-user-avatar {
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
  border-radius: 9999px; /* rounded-full */
  object-fit: cover;
}

/* 用户名 */
.header-user-name {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #374151; /* text-gray-700 */
}

/* ===== 响应式设计 ===== */

/* 平板 */
@media (max-width: 1024px) and (min-width: 769px) {
  .app-header {
    left: 12rem; /* 192px */
  }
}

/* 移动端 */
@media (max-width: 768px) {
  .app-header {
    left: 0;
    padding: 0.5rem 1rem;
  }
  
  .header-container {
    padding: 0.5rem 1rem;
  }
  
  .header-search-input {
    min-width: 150px;
  }
  
  .header-user-name {
    display: none; /* 移动端隐藏用户名 */
  }
}
</style>